<template>
	<view>
		<view class="header_box">
			<view class="header_content flex-cen" v-if="blankStatus" :style="{ height: titleBarHeight + 'px', 'padding-top': statusBarHeight + 'px', 'background-color': bgColor }">
				<!-- 返回栏目 -->
				<view class="back_box flex-cen-cen" v-if="backStatus" :class="{ white_bg_back: closeStyle == 'whiteBg' }" :style="{ filter: backLogoColor == 'black' ? '' : 'brightness(100)' }" @click="backBtn">
					<image src="../../static/components/nav_back_logo.svg" />
				</view>
				<view class="header_title one-hide" :class="titlePosition == 'center' ? 'title_center' : 'title_left'" :style="{ color: navTitleColor, 'font-size': titleSize + 'rpx', 'font-weight': titleWeight }">
					{{ navTitle }}
				</view>
				<view class="nav_right_box">
					<slot></slot>
				</view>
			</view>
			<view v-else :style="{ height: titleBarHeight + 'px', 'padding-top': statusBarHeight + 'px' }" style="background-color: transparent"></view>
		</view>
		<view class="header_blank_box" :style="{ height: titleBarHeight + statusBarHeight + 'px' }"> </view>
	</view>
</template>
<script>
import util from "../../public/util.js"
export default {
	props: {
		// 页面标题
		navTitle: {
			type: String,
			default: "",
		},
		// 页面标题颜色
		navTitleColor: {
			type: String,
			default: "#000",
		},
		// 背景颜色 可是透明 transparent
		bgColor: {
			type: String,
			default: "transparent",
		},
		//返回图标的颜色 white 或 black
		backLogoColor: {
			type: String,
			default: "black",
		},
		// 判断是否展示返回按钮
		backStatus: {
			type: Boolean,
			default: true,
		},
		// 判断是否什么也不展示 默认true为展示,false为不展示(没白标题,没返回,没背景)
		blankStatus: {
			type: Boolean,
			default: true,
		},
		// 是否自定义返回按钮(点击后将返回按钮通过$emit返回给父级)
		backEmitStatus: {
			type: Boolean,
			default: false,
		},
		// 标题位置
		titlePosition: {
			type: String,
			default: "center",
		},
		// 标题位置
		titleSize: {
			type: String,
			default: "34",
		},
		// 标题字重
		titleWeight: {
			type: [String, Number],
			default: "bold",
		},
		// 返回图标样式
		closeStyle: {
			type: String,
			default: "default", //whiteBg (返回变成白色背景logo) ,whiteLogo
		},
	},
	data() {
		return {
			titleBarHeight: this.$bus.titleBarHeight,
			statusBarHeight: this.$bus.statusBarHeight,
			navTotalHeight: this.$bus.navTotalHeight,
		}
	},
	methods: {
		// 回到上一页
		backBtn: util.throttle(function () {
			if (this.backEmitStatus) {
				return this.$emit("tapBackBtn")
			}
			this.$uniApi.backPage()
		}, 400),
	},
}
</script>

<style lang="scss" scoped>
.header_box {
	z-index: 98;
	width: 100%;
    box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	.header_content {
		/* padding-left: 32rpx; */
		.back_box {
			margin-right: 20rpx;
			width: 30px;
			height: 30px;
			&.white_bg_back {
				background-color: #ffffff;
				border-radius: 50%;
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
		.header_title {
			max-width: 480rpx;
			&.title_center {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
			&.title_left {
				position: relative;
			}
		}

		.nav_right_box {
			position: absolute;
			right: 32rpx;
		}
	}
}
.header_blank_box {
	/* width: 100vw; */
}
</style>
